<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div>
  <img src="../assets/imagebox/5.jpg">
      </div>
        
        <el-button type="primary" plain>登 录</el-button>
      </el-header>
      <!-- 轮播图 -->
      <el-row>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in imagebox" :key="item.id">
            <img :src="item.idView" class="image" />
          </el-carousel-item>
        </el-carousel>
      </el-row>

      <el-container class="uu">
        <el-main>
          <div>
            <el-card style="width: 100%; height:5%">
              <div class="btn">
                <el-button style="width:25%">新闻时事</el-button>
                <el-button style="width:25%">公司动态</el-button>
                <el-button style="width:25%">大神风采</el-button>
                <el-button style="width:25%">关于我们</el-button>
              </div>
            </el-card>
          </div>
          <div class="content" >
            <el-card
              class=""
              style="width: 100%; height: 710px; margin-top: 20px"
            >
              <el-card class="" style="width: 100%; height: 270px">
                <el-card
                  class=""
                  style="width:40%; height: 226px; float: left"
                >
                  <img src="../assets/imagebox/1.jpg" alt="" style="height: 186px;" />
                </el-card>
                <el-card style="width: 59%; height: 100%;">
                  <el-card style="width:100%;height:50px;text-align: center;">
                    文章标题
                  </el-card>
                  <el-card style="width:100%;height:70px;margin-top:5px">
                    文章简介
                  </el-card>
                  <div class="num" style="margin-top:5px">
                    <el-card style="width:25%;height:50px;">点赞数量</el-card>
                    <el-card style="width:25%;height:50px;">评论数量</el-card>
                    <el-card style="width:25%;height:50px;">阅读数量</el-card>
                    <el-card style="width:25%;height:50px;">发布日期</el-card>
                  </div>
                </el-card>
              </el-card>

              <el-card class="" style="width: 100%; height: 270px ;margin-top:20px">
                <el-card
                  class=""
                  style="width:40%; height:226px; float: left"
                >
                  <img src="../assets/imagebox/1.jpg" alt=""   style="height:186px;"/>
                </el-card>
                <el-card style="width: 59%; height: 100%;">
                  <el-card style="width:100%;height:50px;text-align: center;">
                    文章标题
                  </el-card>
                  <el-card style="width:100%;height:70px;margin-top:5px">
                    文章简介
                  </el-card>
                  <div class="num" style="margin-top:5px">
                    <el-card style="width:25%;height:50px;">点赞数量</el-card>
                    <el-card style="width:25%;height:50px;">评论数量</el-card>
                    <el-card style="width:25%;height:50px;">阅读数量</el-card>
                    <el-card style="width:25%;height:50px;">发布日期</el-card>
                  </div>
                </el-card>
              </el-card>
           
            </el-card>
          </div>
        </el-main>

        <!-- 排行 -->
        <el-aside style="width:20%">
          <div style="padding-top:20px">
            <el-card class="box-card" style="width: 85%;margin-left:5%">
              <div slot="header" class="clearfix">
                <span
                  >48小时阅读排行<el-link
                    href="https://element.eleme.io"
                    target="_blank"
                    style="float: right"
                    >>>>更多</el-link
                  ></span
                >
              </div>
              <div>
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style=""
                  >1.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >2.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >3.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >4.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
              </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 30px; width: 85%;margin-left:5%">
              <div slot="header" class="clearfix">
                <span
                  >10天编辑推荐<el-link
                    href="https://element.eleme.io"
                    target="_blank"
                    style="float: right"
                    >>>>更多</el-link
                  ></span
                >
              </div>
              <div>
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style=""
                  >1.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >2.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >3.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >4.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
              </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 30px; width: 85%;margin-left:5%">
              <div slot="header" class="clearfix">
                <span
                  >10天评论排行<el-link
                    href="https://element.eleme.io"
                    target="_blank"
                    style="float: right"
                    >>>>更多</el-link
                  ></span
                >
              </div>
              <div>
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style=""
                  >1.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >2.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >3.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
                <el-link
                  href="https://element.eleme.io"
                  target="_blank"
                  style="padding-top: 10px"
                  >4.xxxxxxxxxxxxxxxxxxxxxxxxx</el-link
                >
              </div>
            </el-card>
          </div>
        </el-aside>
      </el-container>

      <!-- 联系我们(二维码) -->
      <el-row class="two">
        <el-col class="jj">
          <el-card class="code">
            <img src="../assets/imagebox/4.jpg" class="tp" />
            <div>
              <span style="margin-left:50px">扫码关注公众号</span>
            </div>
          </el-card>
          <el-card class="code">
            <img src="../assets/imagebox/4.jpg" class="tp" />
            <div>
              <span style="margin-left:50px">扫码加微信群</span>
            </div>
          </el-card>
          <el-card class="code">
            <img src="../assets/imagebox/4.jpg" class="tp" />
            <div>
              <span style="margin-left:50px">扫码加QQ群</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-footer>
        ICP备案号
        <br />
        <br />
        公安备案号
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagebox: [
        { id: 0, idView: require("../assets/imagebox/1.jpg") },
        { id: 1, idView: require("../assets/imagebox/2.jpg") },
        { id: 2, idView: require("../assets/imagebox/3.jpg") },
      ],
      screenWidth: 0,
    };
  },
  methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (400 / 1920) * this.screenWidth;
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
  },
};
</script>

<style>
body {
  /* background-color: #545c64 !important; */
  margin: 0px !important;
}

.el-header {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: skyblue; */
}
.el-footer {
  background-color: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  /* text-align: center; */
  /* line-height: 200px; */
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  min-height: calc(100vh - 120px);
  min-width: calc(100vh-120px)
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 100%;
  height: inherit;
}
.el-card.is-always-shadow {
  width: 250px;
  height: 250px;
}

.jj {
  padding-top: 10px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content:space-between;
  flex-wrap:nowrap
  
}
.tp {
  width: 200px;
  height: 200px;
  
}

.num{
  display: flex;
  align-items: center; 
  justify-content: center;
  text-align: center;
  /* font-size: 3px; */
}
.btn{
  display: flex;
  align-items: center;
}
</style>